<template>
	<view class="zxh-ht-xiangqing">
		<view class="xiangqing-neirong">
			
			<h2>发布时间：{{$route.query.time}}</h2>
			<div>
				<img src="../../../static/image/Square/banner1.jpg" alt="">
			</div>
			<p>
				体沟通会，恒昌公司副总裁张然做了现场演讲，
				详细阐述了恒昌近年来的精准扶贫之路。此外，
				会议还邀请到了联合国联合开发计剌署(下称UNDP)
				成员UNDP驻华代表处国别副主任何佩德(Patrick 
				Haverman) . UNDP驻华代表处《贪困地区农户创
				业的金融需求与供给研究》课题协调人曾梦以及媒
				体嘉宾。会上，恒昌与UNlDP就之前的精准扶贫方
				面的战略合作进行了总结和交流，中西方的思想交
				流与碰撞，也令本次媒体沟通会更为专业化
				体沟通会，恒昌公司副总裁张然做了现场演讲，详细
				阐述了恒昌近年来的精准扶贫之路.此外
				，会议还邀请到了联合国联合开发计剌署(下称开
				发计划署)成员驻华代表处国别副主任何佩德(Pat
				rickHaverman)。开发署驻华代表处“贪困地区农户
				创业的金融需求与供给研究”课题协调人曾梦以及媒
				体嘉宾。会上，恒昌与UNlDP就之前的精准扶贫方面
				的战略合作进行了总结和交流，中西方的思想交流
				与碰撞，也令本次媒体沟通会更为专业化
			</p>
			<view class="root-bottom">
				<view class="bottom-item">
					<u-icon name="thumb-up" color="#ccc" size="18"></u-icon>
					<p>{{$route.query.dz}}</p>
				</view>
				<view class="bottom-item">
					<u-icon name="eye" color="#ccc" size="18"></u-icon>
					<p>{{$route.query.sc}}</p>
				</view>
				<view class="bottom-item">
					<u-icon name="more-circle" color="#ccc" size="18"></u-icon>
					<p>{{$route.query.gz}}</p>
				</view>
			</view>
		</view>
		<view class="xiangqing-master">
			<view class="xiangqing-tou">
				<img src="../../../static/image/Square/tou.jpg" alt="">
				<p>{{$route.query.name}}</p>
			</view>
			<span class="span1" v-show="isShow" @click="isShow = !isShow">+关注</span>
			<span class="span2" v-show="!isShow" @click="isShow = !isShow">取消关注</span>
		</view>
		<h3>全部评论</h3>
		<view class="xiangqing-pingluen">
			<Pingluen v-for="item in liuyan" :key="item.id" :liuyan="item"></Pingluen>
		</view>
		<view class="xiangqing-faxiaoxi">
			<view class="faxiaoxi-dianzan">
				<u-icon name="thumb-up" color="#28d2d1" size="40"></u-icon>
			</view>
			<input type="text" placeholder="输入您要发布的评论" v-model="value">
			<span @click="pubsub">发布评论</span>
		</view>
	</view>
</template>

<script>
	import Pingluen from '../components/Pingluen.vue';
	export default {
		components:{
			Pingluen
		},
		data(){
			return{
				value:"",
				isShow:true,
				liuyan:[],
				xinxi:{}
			}
		},
		methods:{
			pubsub(){
				if(!this.value==''){
					let obj = {
						user:"你得支棱起来呀",
						massage:this.value
					}
					this.liuyan.push(obj);
					this.value = ''
				}
			}
		},
		mounted() {
			this.$api.zxhliuyan().then(res => {
				this.liuyan = res.data;
			})
		},
		opLoad(option){
			this.xinxi=option
		}
	}
</script>

<style lang="scss" scoped>
.zxh-ht-xiangqing{
	margin: 0;
	padding: 0;
	.xiangqing-neirong{
		width: 95%;
		margin: 0 auto;
		h2{
			font-size: 16upx;
			font-weight: 400;
			text-align: right;
			color: #ccc;
			margin-top: 40upx;
			margin-right: 40upx;
		}
		p{
			font-size: 20upx;
			padding: 0 20upx;
			margin-top: 20upx;
		}
		div{
			width: 90%;
			margin: 0 auto;
			margin-top: 20upx;
			img{
				width: 100%;	
			}
		}
		.root-bottom{
			margin-top: 25upx;
			height: 60upx;
			display: flex;
			justify-content: space-around;
			.bottom-item{
				margin: 10upx 15upx 0 15upx;
				width: 120upx;
				height: 40upx;
				position: relative;
				p{
					font-size: 18upx;
					color: #ccc;
					position: absolute;
					top: -20upx;
					right: 0;
				}
			}
		}
	}
	.xiangqing-master{
		width: 95%;
		margin: 0 auto;
		height: 120upx;
		border-radius: 15upx;
		border: 1upx solid #ccc;
		position: relative;
		.xiangqing-tou{
			width: 320upx;
			height: 120upx;
			img{
				height: 80%;
				margin-top: 10upx;
				margin-left: 10upx;
				float: left;
			}
			p{
				font-size: 22upx;
				font-weight: 600;
				line-height: 120upx;
				margin-left: 20upx;
				float: left;
			}
		}
		.span1{
			width: 140upx;
			height: 65upx;
			font-size: 28upx;
			text-align: center;
			line-height: 65upx;
			background: #28d2d1;
			border-radius: 25upx;
			position: absolute;
			top: 27upx;
			right: 30upx;
		}
		.span2{
			width: 140upx;
			height: 65upx;
			font-size: 28upx;
			text-align: center;
			line-height: 65upx;
			background: #cccccc;
			border-radius: 25upx;
			position: absolute;
			top: 27upx;
			right: 30upx;
		};
	}
	h3{
		margin-top: 70upx;
		margin-left: 30upx;
		border-left: 20upx solid #28d2d1;
		padding-left: 8upx;
		font-size: 38upx;
		font-weight: 600;
	}
	.xiangqing-pingluen{
		padding-bottom: 130upx;
	}
	.xiangqing-faxiaoxi{
		width: 100%;
		height: 125upx;
		background: #fff;
		border-top: 1upx solid #ccc;
		position: fixed;
		left: 0;
		bottom: 0;
		.faxiaoxi-dianzan{
			width: 125upx;
			height: 125upx;
			margin-left: 25upx;
			margin-top: 25upx;
		}
		input{
			width: 400upx;
			height: 80upx;
			background: #ccc;
			border-radius: 15upx;
			position: absolute;
			top: 25upx;
			left: 120upx;
		}
		span{
			width: 160upx;
			height: 80upx;
			background: #28d2d1;
			color: #fff;
			border-radius: 30upx;
			text-align: center;
			line-height: 80upx;
			position: absolute;
			top: 25upx;
			right: 25upx;
		}
	}
}
</style>